<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  1.准备一个上传控件
  <input type="file">
  <img src="" alt="">
  <script>
    //2.给当前上传按钮设置一个change事件
    var input = document.querySelector('input');
    var img = document.querySelector('img');
    input.addEventListener('change',function(){
      //3.获取用户上传的文件
      console.dir(input)
      var file = this.files[0];
      //4.开始读取文件(先创建一个读取器)
      var reader = new FileReader();
      console.dir(reader);
      //5.通过读取器中的方法和属性开始读取文件
      // readAsText()方法 将文件读取成文本形式
      // readAsDataURL()方法 将文件读取成路径形式
      // result 属性 获取读取结果
      //6.开始读取文件
      reader.readAsDataURL(file);
      //7.通过onload事件 获取最后的读取结果,当读取资源完全被加载完毕,可以使用resule属性读取最终的结果
      reader.onload = function(){
        //8.必须在读取的onload事件中获取读取结果 并将 结果赋值给页面中的元素标签
        console.log(reader.result);
        img.src = reader.result;
      };
    })
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="file">
  <img src="" alt="">
  <script>
    var input =  document.querySelector('input');
    var img = document.querySelector('img');
    input.onchange = function(){
      console.dir(this);
      var file = this.files[0];
      var reader = new FileReader();
      console.dir(reader);
      reader.readAsDataURL(file);
      reader.addEventListener('load',function(){
        console.log(reader.result);
        img.src = reader.result;
      })
    }
  </script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="file">
  <img src="" alt="">
  <script>
    var input = document.querySelector('input');
    var img = document.querySelector('img');
    input.onchange = function(){
      var file = this.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(){
        img.src = reader.result;
      }
    }
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .content{
      width: 300px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <input type="file">
  <div class="content">
    <span>我是div标签中的第一个子节点span
      <p></p>
    </span>
  </div>
  <script>
    var input = document.querySelector('input');
    var div = document.querySelector('div');
    input.onchange = function(){
      var file = this.files[0];
      var reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function(){
        div.firstElementChild.firstElementChild.innerText = reader.result;
        // div.innerText = reader.result;
      }
    }
  </script>
</body>
</html> -->


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>
<body>
  <input type="file">
  <script>
    var input = document.querySelector('input');
    input.addEventListener('change',function(){
      var file = this.files[0];
      var reader = new FileReader();
      reader.readAsText(file);
      reader.addEventListener('load',function(){
        var head = document.querySelector('head');
        var style = document.createElement('style');
        head.appendChild(style);
        style.innerHTML = this.result;
      });
    });
  </script>
</body>
</html>